<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>axios的默认配置和创建实例</h1>
  <button class="btn1">1发送get</button>
  <button class="btn2">2发送post</button>
  <button class="btn3">3发送delete</button>
  <button class="btn4">4发送put请求</button>
  <script>
    //    axios的默认配置和实例
    // 一、axios的默认配置
    // let btn1 = document.querySelector(".btn1");
    // let btn2 = document.querySelector(".btn2");
    // 发送axios请求的时候会有一些公共配置
    // 设置axios的默认配置，所有的axios公共配置
    // axios.defaults.timeout = 2000   // 所有的axios请求超时时间都是2s
    // axios.defaults.baseURL = "/api" // 基础路径 所有的请求都会把baseURL拼接到url前再发送请求
    // 1.提取所有axios的公共路径  2.项目上线以后，没有跨域问题，baseURL后面会修改
    // btn1.onclick = function(){
    //     axios({
    //         url:"/getdata",
    //         method:"get",
    //     }).then(res=>{
    //         let {data} = res;
    //         console.log(data);
    //     })
    // }

    // btn2.onclick = function(){
    //     axios({
    //         url:"/getpostdata",
    //         method:"post",
    //     }).then(res=>{
    //         let {data} = res;
    //         console.log(data);
    //     })
    // }

    // 二、axios 创建实例

    let btn1 = document.querySelector(".btn1");
    let btn2 = document.querySelector(".btn2");
    let btn3 = document.querySelector(".btn3");
    let btn4 = document.querySelector(".btn4");
    // 需求：1、2按钮请求超时设置2秒，请求4000端口服务器  3、4按钮设置请求超时时间3秒，请求5000端口服务器
    // 创建两个axios实例
    let instance1 = axios.create();
    instance1.defaults.timeout = 2000;
    instance1.defaults.baseURL = "http://localhost:4000/api";
    btn1.onclick = function () {
      instance1({
        url: "/getdata",
        // timeout: 2000,
        // baseURL: "http://localhost:4000/api"
      }).then(res => {
        console.log(res);
      })
    }
    btn2.onclick = function () {
      instance1({
        url: "/getdata2",
        // timeout: 2000,
        // baseURL: "http://localhost:4000/api"
      }).then(res => {
        console.log(res);
      })
    }

    let instance2 = axios.create();
    instance2.defaults.timeout = 3000;
    instance2.defaults.baseURL = "http://localhost:5000/api";

  </script>
</body>

</html>